<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">


    <h:head>

        <title>SHUCKAPP - Top 5</title>
        <link rel="stylesheet" type="text/css" href="/Shuckapp/recursos/css/estilos.css" />

    </h:head>

    <h:body>

        <p:graphicImage value="/recursos/imagenes/logo_shuckapp.png" width="200px"  height="100px"/>
        <h:form id="fr_menu">
            <p:panel  styleClass="cuerpo">

          
                <p:stack icon="/recursos/imagenes/icon_menu.png" expanded="true" closeSpeed="30" id="menu">
                    <c:forEach items="#{bmenuInicio.menus}" var="link">
                        <p:menuitem  value="#{link.titulo}"  url="#{link.outcome} "  icon="#{link.icon}"    />  
                    </c:forEach>

                </p:stack>
                <p:draggable for="menu"  /> 

            </p:panel>
        </h:form>
        
        <!-- cuerpo de Top 5 -->
        <h:form>
            <br />
            <br />
            
            <p:growl id="msgs" showDetail="true" />
            
            <center>
            <p:panel id="basic" header="ShuckApp - Top 5" style="margin-bottom:20px; width:50%;">
                
                <!-- tabla de informacion top 5 -->                  
                    <table> 
                        <tr>
                            <td align="center" >Top</td>
                            <td align="center" >Restaurante</td>
                            <td align="center" >Puntuacion</td>   
                        </tr>

                        <ui:repeat var="o" value="#{top.lista}" >
                            <tr>
                                <td align="center">#{o.index}</td>
                                <td align="left">
                                    
                                <h:link value="#{o.nombre_restaurante}" outcome="menu">   
                                    <f:param name="marker" value="#{o.codigo_restaunte}" />
                                </h:link>
                            
                                </td>                                
                                <td align="center">#{o.promedio}</td>                                
                            </tr>
                       </ui:repeat>
                    </table>

                    <p:growl id="growl" showDetail="true" />
                    
                     <p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px">
                            <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
                     </p:chart>                    
                    
            </p:panel>  
            </center>
            
                
        </h:form>


    </h:body>

</html>
